import React, { useState, useMemo, useCallback } from "react";

function App() {
    const [count, setCount] = useState(0);
    const [random, setRandom] = useState(0);
    const dbCountFn = useCallback(() => {
        console.log("我是计算双倍count的函数");
        return count * 2;
    }, [count]);
    // useMemo 缓存的不是函数而是函数的返回值
    // useCallback 缓存的是函数体
    // 依赖值用useMemo，依赖函数用useCallback
    const dbCount = useMemo(() => {
        console.log("我是计算双倍count的函数");
        return count * 2;
    }, [count]);

    return (
        <div>
            <p>随机数: {random}</p>
            <p>count: {count}</p>
            <p>dbCount: {dbCount}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button>
        </div>
    );
}

export default App;
